<template>
  <div class="indexPage">
    <header>
      <span class="el-icon-office-building" id="house"></span>
      <span>欢迎使用学生管理系统</span>
      <div
        class="iconfont icon-icoyonghuming"
        id="users"
        @click="detailShow = !detailShow"
      >
        <ul class="detailed" v-show="detailShow">
          <li><a href="#">个人信息</a></li>
          <li><a href="#">修改密码</a></li>
          <li><a href="#">帮助</a></li>
          <li><a href="#">关于系统</a></li>
          <li><a href="#">退出登录</a></li>
        </ul>
      </div>
    </header>
    <!-- 左边菜单栏展示 -->
    <!-- 用户信息 -->
    <div class="box">
      <div class="left" :style="imageleft">
        <div class="top">
          <div class="userSquire">
            <img
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              alt=""
            />
          </div>
          <div class="exhibition">
            <div class="userName">admin</div>
            <span class="online"> <i></i>在线</span>
            <span class="exsit" @click="ManageExsit"><i>👉</i>退出</span>
          </div>
        </div>
        <!-- 菜单信息 -->
        <nav>
          <el-tree
            class="filter-tree"
            :data="items"
            node-key="path"
            :props="defaultProps"
            highlight-current
            :render-content="renderContent"
            @node-click="handleNodeClick"
            ref="tree"
            accordion
          >
          </el-tree>
        </nav>
      </div>
      <!-- 展示 -->
      <div class="right">
        <div class="bread" :style="imagePic">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/TeacherLogin/Homepage' }"
              >首页
            </el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in activeBreads"
              :key="index"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="routerContent" :style="imagePic">
          <router-view v-if="isRouterAlive"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import "../assets/font/iconfont.css";
export default {
  name: "TeacherLogin",
  data() {
    return {
      // 背景图片
      imagePic: {
        backgroundImage: "url(" + require("@/assets/bgc.webp") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      },
      imageleft: {
        backgroundImage: "url(" + require("@/assets/bgc.webp") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: " 0 -210px",
      },
      detailShow: false,
      // 未处理延期
      UntreatedDelay: 0,
      // 未处理验收
      UntreatedCheck: 0,
      isRouterAlive: true,
      //菜单
      items: [
        { name: "首页", path: "Homepage", icon: "el-icon-s-home" },
        {
          name: "资源管理",
          path: null,
          children: [
            { name: "学科管理", path: "Object" },
            { name: "阶段管理", path: "Stage" },
            { name: "关卡管理", path: "Checkpoints" },
          ],
        },
        {
          name: "人员管理",
          path: null,
          children: [
            { name: "用户管理", path: "Student" },
            { name: "激活用户", path: "ActiveUser" },
          ],
        },
        {
          name: "消息处理",
          path: null,
          children: [
            { name: "验收处理", path: "CheckProcess" },
            { name: "延期处理", path: "DelayProcess" },
          ],
        },
        {
          name: "权限管理",
          path: null,
          children: [
            { name: "角色列表", path: "Character" },
            { name: "权限列表", path: "PermissionList" },
          ],
        },
        { name: "项目", path: "ProjectItem", icon: "el-icon-folder-opened" },
        { name: "看板", path: "Board", icon: "el-icon-data-line" },
      ],
      //配置显示的内容为属性名为 name 的值
      defaultProps: {
        label: "name",
      },
      breads: [],
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },

  methods: {
    // 渲染函数
    renderContent(h, { node, data, store }) {
      return (
        <span>
          <i class={data.icon}>&nbsp;&nbsp;</i>
          <span>{node.label}</span>
        </span>
      );
    },
    // 退出登录
    ManageExsit() {
      this.$router.push("/login");
    },
    //点击最后一个子节点要有相应方法
    handleNodeClick(data, node) {
      const children = this.$refs.tree.getNode(data);
      // console.log(children.data.path);
      if (children.data.path === null) {
        return;
      } else {
        this.$router.push({
          name: children.data.path,
        });
      }
    },
    // 生成面包屑
    getBreadcrumb() {
      this.breads = [];
      //   console.log(this.$route.matched);
      this.$route.matched.forEach((item, index) => {
        if (index !== 0) {
          this.breads.push({
            name: item.meta.title,
            path: item.path,
          });
          this.type = item.meta.type;
        }
      });
    },
    //局部刷洗
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  mounted() {
    this.getBreadcrumb();
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    if (this.$router.path !== "/TeacherLogin/HomePage") {
      this.$router.replace("/TeacherLogin/HomePage");
    }
  },
  computed: {
    // 当当前为首页时，第一个路由不出现
    activeBreads() {
      return this.breads.filter(function (index) {
        //  console.log(index);
        return index.name !== "首页";
      });
    },
  },
};
</script>

<style scoped>
body {
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
a {
  text-decoration: none;
}

nav /deep/.el-tree {
  background-color: transparent;
}
nav /deep/ .el-tree-node {
  background-color: transparent !important;
}
.indexPage {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #528bb7;
  line-height: 50px;
  padding-left: 10px;
  color: white;
  font-family: "Times New Roman", Georgia, Serif;
 
}
.el-icon-office-building:before {
  position: absolute;
  font-size: 40px;
  top: 3px;

}
#house {
  margin-right: 55px;
  color: #d99b2f;
}
.h-center {
  display: flex;
  padding: 0 10px;
  margin-left: 310px;
}

a[data-v-e9bf8d52] {
  padding: 0 30px;
  color: #fff;
  border-right: 1px solid #ccc;
}
#users {
  position: absolute;
  right: 30px;
  top: 0;
  width: 100px;
  height: 50px;
  cursor: pointer;
}
.icon-icoyonghuming:before {
  position: absolute;
  left: 30px;
  font-size: 35px;
}
.detailed {
  /* overflow: hidden; */
  position: absolute;
  top: 50px;
  left: -26px;
  width: 142px;
  height: 213px;
  background-color: white;
  transition: all 0.5s;
  border: 1px solid #ccc;
  border-radius: 3px;
  z-index: 5;
}
.detailed li {
  /* border-bottom: 1px solid #ccc; */
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.detailed li a {
  display: inline-block;
  height: 10px;
  font-size: 14px;
  color: #0e0e0e;
  border-right: none;
}
.detailed li:hover {
  background-color: rgb(49, 183, 236);
}
.box {
  display: flex;
  flex: 1;
}
.left {
  overflow: hidden;
  width: 15%;
  height: 100%;
  /* flex-shrink:0; */
  /* background-color: #2e4050; */
  background: linear-gradient(to bottom, #2e4050 0%, #2e4050 100%);
  /* box-sizing:content-box;
            padding-right: 10px; */
}
.top {
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 10px;
  margin-left: 2px;
  padding-left: 10px;
}
.exhibition {
  flex: 1;
  height: 100px;
  padding-left: 10px;
  padding-top: 20px;
  color: white;
}
.online {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  margin-right: 20px;
}
.online i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgb(88, 211, 63);
  margin-right: 5px;
}
.exsit {
  font-size: 13px;
  cursor: pointer;
}
.exsit i {
  margin-right: 5px;
}
.userSquire {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: white;
  overflow: hidden;
}
.userSquire img {
  width: 100%;
  height: 100%;
}
/* 菜单栏展示样式 */
/* 节点内容的背景颜色 */
nav /deep/.el-tree-node__content {
  color: white;
  background-color: transparent;
  height: 60px;
  padding-left: 10px !important;
  font-weight: 700;
}
/* 鼠标选中节点的背景颜色 */
nav /deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: #528bb7 !important;
}
/* 鼠标经过节点的背景颜色 */
nav /deep/ .el-tree-node__content:hover {
  background-color: #528bb7;
}
/* 鼠标离开节点时的背景颜色 */
nav
  /deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #528bb7;
}
/* 右边布局样式 */
.right {
  display: flex;
  flex-direction: column;
  /* flex:1; */
  width: 85%;
  flex-shrink: 1;
  background-color: #eeeeee;
  /* background: linear-gradient(to right, #504ba2 0%,#2fa1d1 100%); */
  padding: 10px 15px 10px 15px;
}
.bread {
  width: 100%;
  height: 40px;
  padding-top: 12px;
  padding-left: 10px;
  background-color: white;
  margin-bottom: 20px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
.routerContent {
  /* width: 100%; */
  flex: 1;
  padding: 20px;
  /* background-color: #fff; */
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
</style>